<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
    <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板" />
    <meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。" />
    <meta name="author" content="yinq" />
    <title>注册 - 光年</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/libs/light/favicon.ico}" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />

    <link rel="stylesheet" type="text/css" th:href="@{/libs/light/css/materialdesignicons.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/libs/light/css/bootstrap.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/libs/light/css/animate.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/libs/light/css/style.min.css}" />
    <style>
        .signin-form .has-feedback {
            position: relative;
        }

        .signin-form .has-feedback .form-control {
            padding-left: 36px;
        }

        .signin-form .has-feedback .mdi {
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            width: 36px;
            height: 36px;
            line-height: 36px;
            z-index: 4;
            color: #dcdcdc;
            display: block;
            text-align: center;
            pointer-events: none;
        }

        .signin-form .has-feedback.row .mdi {
            left: 15px;
        }
    </style>
</head>

<body class="center-vh" style="
      background-image: url(/libs/light/images/login-bg-2.jpg);
      background-size: cover;
    ">
    <div class="card card-shadowed p-5 mb-0 mr-2 ml-2">
        <div class="text-center mb-3">
            <a href="index.html">
                <img alt="light year admin" th:src="@{/libs/light/images/logo-sidebar.png}" />
            </a>
        </div>

        <form id="registerForm" class="signin-form needs-validation" novalidate>
            <div class="mb-3 has-feedback">
                <span class="mdi mdi-email" aria-hidden="true"></span>
                <input type="text" class="form-control" name="email" id="email" placeholder="邮箱" required />
            </div>

            <div class="mb-3 has-feedback row">
                <div class="col-7">
                    <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                    <input type="text" name="thirdCode" autocomplete="off" id="mailCode" class="form-control" placeholder="邮箱验证码"
                        required />
                    <input type="hidden" id="thirdUuid" name="thirdUuid" />
                </div>
                <div class="col-5 text-right">
                    <button class="btn btn-primary" type="button" id="sendEmailCodeBtn">发送验证码</button>
                </div>
            </div>
            <div class="mb-3 has-feedback">
                <span class="mdi mdi-account" aria-hidden="true"></span>
                <input type="text" class="form-control" name="username" autocomplete="off" id="username"
                    placeholder="用户名" required />
            </div>
            <div class="mb-3 has-feedback">
                <span class="mdi mdi-lock" aria-hidden="true"></span>
                <input type="password" class="form-control" name="password" autocomplete="off" id="password"
                    placeholder="密码" required />
            </div>
            <div class="mb-3 has-feedback">
                <span class="mdi mdi-lock" aria-hidden="true"></span>

                <input type="password" class="form-control"  id="checkPassword" placeholder="确认密码"
                    required />
            </div>
            <div class="mb-3 has-feedback row">
                <div class="col-7">
                    <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                    <input type="text" name="code" id="code" class="form-control" placeholder="图形验证码" required />
                    <input type="hidden" name="uuid" id="uuid" />
                </div>
                <div class="col-5 text-right">
                    <img class="pull-right" id="captcha" style="cursor: pointer; height: 38px; display: none"
                        onclick="getCaptchaImage()" title="点击刷新" alt="captcha" />
                </div>
            </div>
            <div class="mb-3 d-grid">
                <button class="btn btn-primary" type="button" id="btnSubmit" disabled >立即注册</button>
            </div>
        </form>

        <p class="text-center text-muted mb-0">
            Copyright © 2022
            <a target="_blank" href="http://www.bixiaguangnian.com">笔下光年</a>.
            All right reserved
        </p>
    </div>

    <script type="text/javascript" th:src="@{/libs/light/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/libs/light/js/popper.min.js}"></script>
    <script type="text/javascript" th:src="@{/libs/light/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/libs/light/js/lyear-loading.js}"></script>
    <script type="text/javascript" th:src="@{/libs/light/js/bootstrap-notify.min.js}"></script>
    <script type="text/javascript">
        var loader, wait = 60, btnSub = $("#btnSubmit"),sendEmailCodeBtn=$("#sendEmailCodeBtn");
        // $(document).ajaxStart(function () {
        //     $("button:submit").html('登录中...').attr("disabled", true);
        //     loader = $('button:submit').lyearloading({
        //         opacity: 0.2,
        //         spinnerSize: 'nm'
        //     });
        // }).ajaxStop(function () {
        //     loader.destroy();
        //     $("button:submit").html('立即登录').attr("disabled", false);
        // });

        sendEmailCodeBtn.click(function (event) {
            //验证是否正确输入邮箱
            var emailRex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            var email = $("input[name='email']").val().trim();
            if (!emailRex.test(email)) {
                $.notify(
                            {
                                message: "请输入正确邮箱",
                            },
                            {
                                type: "danger",
                                placement: {
                                    from: "top",
                                    align: "right",
                                },
                                z_index: 10800,
                                delay: 1500,
                                animate: {
                                    enter: "animate__animated animate__shakeX",
                                    exit: "animate__animated animate__fadeOutDown",
                                },
                            }
                        )
            }
            else {
                $.ajax({
                    type: "get",
                    url: "/getMailCode/" + email,
                    success: function (r) {
                        if (r.code == 200) {
                            $("#thirdUuid").val(r.thirdUuid);
                            $.notify(
                            {
                                message: "发送成功",
                            },
                            {
                                type: "success",
                                placement: {
                                    from: "top",
                                    align: "right",
                                },
                                z_index: 10800,
                                delay: 1500,
                                animate: {
                                    enter: "animate__animated animate__fadeInUp",
                                    exit: "animate__animated animate__fadeOutDown",
                                },
                            }
                        )
                            time();
                        }
                        else {
                            $.notify(
                            {
                                message: "获取失败：失败原因为"+r.msg,
                            },
                            {
                                type: "danger",
                                placement: {
                                    from: "top",
                                    align: "right",
                                },
                                z_index: 10800,
                                delay: 1500,
                                animate: {
                                    enter: "animate__animated animate__shakeX",
                                    exit: "animate__animated animate__fadeOutDown",
                                },
                            }
                        )
                        }

                    }
                });
            }
        });
        function time() {
                if (wait === 0) {
                    sendEmailCodeBtn.attr("disabled", false);
                    sendEmailCodeBtn.html("获取验证码");
                    wait = 60;
                } else {
                    sendEmailCodeBtn.attr("disabled", 'disabled');
                    sendEmailCodeBtn.html(wait + "秒后可获取");
                    btnSub.removeAttr("disabled");
                    wait--;
                    setTimeout(function () {
                        time();
                    }, 1000);
                }
            };

        function register() {
            btnSub.html("注册中...").attr("disabled", true);
            loader = btnSub.lyearloading({
                opacity: 0.2,
                spinnerSize: "nm",
            });
            $.ajax({
                async: true,
                url: "/web/hand/user/register?"+ $("#registerForm").serialize(),
                type: "POST",
                contentType: "application/json",
                timeout: 30000,
                success: function (res) {
                    if(Object.prototype.toString.call(res) != '[object Object]')
                    {
                        res = JSON.parse(res);
                    }

                    if (res.code === 200) {
                        $.notify(
                            {
                                message: "注册成功，页面即将跳转~",
                            },
                            {
                                type: "success",
                                placement: {
                                    from: "top",
                                    align: "right",
                                },
                                z_index: 10800,
                                delay: 1500,
                                animate: {
                                    enter: "animate__animated animate__fadeInUp",
                                    exit: "animate__animated animate__fadeOutDown",
                                },
                            }
                        );
                        setTimeout(function () {
                            location.href = "/";
                        }, 1500);
                    } else {
                        $.notify(
                            {
                                message: "注册失败，错误原因：" + res.msg,
                            },
                            {
                                type: "danger",
                                placement: {
                                    from: "top",
                                    align: "right",
                                },
                                z_index: 10800,
                                delay: 1500,
                                animate: {
                                    enter: "animate__animated animate__shakeX",
                                    exit: "animate__animated animate__fadeOutDown",
                                },
                            }
                        );
                        $("#captcha").click();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $.notify(
                        {
                            message: "服务器错误",
                        },
                        {
                            type: "danger",
                            placement: {
                                from: "top",
                                align: "right",
                            },
                            z_index: 10800,
                            delay: 1500,
                            animate: {
                                enter: "animate__animated animate__shakeX",
                                exit: "animate__animated animate__fadeOutDown",
                            },
                        }
                    );
                },
                complete: function () {
                    loader.destroy();
                    btnSub.html("立即注册").attr("disabled", false);
                },
            });
        }

        function getCaptchaImage() {
            $.get("/captchaImage", function (res, status) {
                document.getElementById("captcha").src =
                    "data:image/gif;base64," + res.img;
                $("#captcha").show();
                document.querySelector("input[name='uuid']").value = res.uuid;
            });
        }

        getCaptchaImage();

       btnSub.click(function (event) {
            if ($("form")[0].checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
                $("#registerForm").addClass("was-validated");
            } else {
                register();
            }
        });
    </script>
</body>

</html>